<template>
  <div class="tencent-map-example">
    <div class="example-header">
      <h2>腾讯地图组件使用示例</h2>
      <p>点击地图获取经纬度坐标</p>
    </div>
    
    <div class="example-content">
      <!-- 基础用法 -->
      <div class="example-section">
        <h3>基础用法</h3>
        <TencentMap 
          ref="mapRef"
          :width="'100%'"
          :height="'400px'"
          :center="{ lat: 39.908823, lng: 116.397470 }"
          :zoom="12"
          :api-key="'YOUR_API_KEY_HERE'"
          @coordinate-selected="onCoordinateSelected"
          @map-ready="onMapReady"
        />
      </div>
      
      <!-- 控制面板 -->
      <div class="control-panel">
        <h3>控制面板</h3>
        <div class="control-row">
          <el-button @click="setBeijing">定位到北京</el-button>
          <el-button @click="setShanghai">定位到上海</el-button>
          <el-button @click="setGuangzhou">定位到广州</el-button>
          <el-button @click="clearMap">清除标记</el-button>
        </div>
        
        <div class="control-row">
          <span>缩放级别:</span>
          <el-slider 
            v-model="zoomLevel" 
            :min="3" 
            :max="18" 
            @change="onZoomChange"
            style="width: 200px; margin-left: 10px;"
          />
        </div>
      </div>
      
      <!-- 选中坐标信息 -->
      <div class="coordinate-info" v-if="selectedCoord">
        <h3>选中的坐标信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>经度:</label>
            <span>{{ selectedCoord.lng }}</span>
          </div>
          <div class="info-item">
            <label>纬度:</label>
            <span>{{ selectedCoord.lat }}</span>
          </div>
          <div class="info-item">
            <label>格式化坐标:</label>
            <span>{{ formatCoordinate(selectedCoord) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import TencentMap from './index.vue'
import type { TencentMapInstance } from './index'

// 引用地图组件
const mapRef = ref<TencentMapInstance>()

// 响应式数据
const selectedCoord = ref<{ lat: number; lng: number } | null>(null)
const zoomLevel = ref(12)

// 预设城市坐标
const cities = {
  beijing: { lat: 39.908823, lng: 116.397470 },
  shanghai: { lat: 31.230416, lng: 121.473701 },
  guangzhou: { lat: 23.129163, lng: 113.264435 }
}

// 事件处理函数
const onCoordinateSelected = (coordinates: { lat: number; lng: number }) => {
  selectedCoord.value = coordinates
  console.log('选中坐标:', coordinates)
}

const onMapReady = () => {
  ElMessage.success('地图加载完成')
  console.log('地图已准备就绪')
}

// 控制函数
const setBeijing = () => {
  mapRef.value?.setCenter(cities.beijing.lat, cities.beijing.lng)
  ElMessage.info('已定位到北京')
}

const setShanghai = () => {
  mapRef.value?.setCenter(cities.shanghai.lat, cities.shanghai.lng)
  ElMessage.info('已定位到上海')
}

const setGuangzhou = () => {
  mapRef.value?.setCenter(cities.guangzhou.lat, cities.guangzhou.lng)
  ElMessage.info('已定位到广州')
}

const clearMap = () => {
  mapRef.value?.clearSelection()
  selectedCoord.value = null
  ElMessage.info('已清除地图标记')
}

const onZoomChange = (value: number) => {
  mapRef.value?.setZoom(value)
}

// 工具函数
const formatCoordinate = (coord: { lat: number; lng: number }) => {
  return `${coord.lng.toFixed(6)}, ${coord.lat.toFixed(6)}`
}
</script>

<style scoped>
.tencent-map-example {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.example-header {
  text-align: center;
  margin-bottom: 30px;
}

.example-header h2 {
  color: #303133;
  margin-bottom: 10px;
}

.example-header p {
  color: #606266;
  margin: 0;
}

.example-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.example-section {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.example-section h3 {
  background: #f5f7fa;
  margin: 0;
  padding: 15px 20px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
}

.control-panel {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
}

.control-panel h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.control-row:last-child {
  margin-bottom: 0;
}

.coordinate-info {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
}

.coordinate-info h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-item label {
  font-weight: 600;
  color: #606266;
  min-width: 80px;
}

.info-item span {
  color: #409eff;
  background: #ecf5ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tencent-map-example {
    padding: 10px;
  }
  
  .control-row {
    flex-wrap: wrap;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>